import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styles from './SalaryList.module.css'
import { Modal, Popconfirm, Space, Table } from 'antd'
import { connect } from 'react-redux'
import { deleteUserSalaryAsync, updateUserSalaryAsync } from '../../../../_redux/actions_async'
import AddDepartmentForm from './AddDepartmentForm'
import AdminAddSalaryForm from './AdminAddSalaryForm'

class SalaryList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      salaryList: this.props.salaryList
    }
  }

  componentWillMount () {

    this.columns = [
      {
        title: '总和',
        dataIndex: 'total',
      },
      {
        title: '岗位工资',
        className: 'column-money',
        dataIndex: 'postSalary',
      },
      {
        title: '绩效工资',
        dataIndex: 'performanceSalary',
      },
      {
        title: '工龄工资',
        dataIndex: 'workYearSalary'
      },
      {
        title: '津贴工资',
        dataIndex: 'allowanceSalary'
      },
      {
        title: '发放情况',
        dataIndex: 'flag',
        render: flag => <span>{['未发放', '已发放'][+flag]}</span>
      },
      {
        title: '发放时间',
        dataIndex: 'time'
      },
      {
        title: '操作',
        dataIndex: 'option',
        render: (text, record) =>
          this.props.salaryList.length >= 1 ? (
            <Space>
              <Popconfirm title="操作" onConfirm={() => this.handleDelete(record.salaryId)}>
                <a>删除</a>
              </Popconfirm>
              <a onClick={() => this.handleEdit(record.salaryId)}>编辑</a>
            </Space>
          ) : null
      }
    ]
  }

  handleEdit = salaryId => {
    this.setState({ showModal: true, editingSalaryId: salaryId })
  }

  handleDelete = salaryId => {
    this.props.deleteUserSalaryAsync(salaryId)
  }

  handleCancel = () => {
    this.setState({ showModal: false })
  }

  handleFinish = e => {
    let salaryId = this.state.editingSalaryId
    let userId = this.props.userId
    // console.log(userId)
    this.props.updateUserSalaryAsync({ userId, salaryId, ...e })
  }

  render () {
    return (
      <div className={styles.container}>
        <Table
          columns={this.columns}
          dataSource={this.props.salaryList}
          bordered
          title={() => '薪酬列表'}
        />
        <Modal visible={this.state.showModal} onCancel={this.handleCancel} footer={null}>
          <AdminAddSalaryForm title="更新薪资状态" btnName="保存" onFinish={this.handleFinish}/>
        </Modal>
      </div>
    )
  }
}

SalaryList.propTypes = {}

SalaryList = connect(
  () => ({}),
  { deleteUserSalaryAsync, updateUserSalaryAsync }
)(SalaryList)

export default SalaryList
